@import 'tailwindcss';
@plugin './hero.ts';
@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));

:root {
  background-image: url('@/assets/bg.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 767px) {
  :root {
    background-image: url('@/assets/bg.svg');
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
  }
}

@layer utilities {
  .scrollbar-hide {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
  .vertical-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
}
